<!-- 分时预约  -->
<template>
  <div class="time-appointment">
    <van-popup v-model="show1" position="bottom" round @close="close" :style="{ height: '65%' }">
      <div class="title">
        <span>请选择服务时间和{{ appointmentLang.reserve_obj }}</span>
        <span class="confirm" @click="submit">确定</span>
      </div>
      <div class="technician">
        <div class="technician-title">{{ appointmentLang.reserve_obj }}</div>
        <div class="list">
          <div class="list-item" v-for="(item, i) in plugin.objs" :key="item.id" @click="choose(i, item)"
            :class="{ 'current': current_index == i }">
            <div class="Img">
              <img :src="item.thumb" />
            </div>
            <p class="name">{{ item.name }}</p>
            <p class="description"><span>{{ item.option_title }}</span></p>
            <p class="description"><span>{{ item.description }}</span></p>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="timeSelectCon">
        <div class="headTop">到店时间</div>
        <div class="calendar">
          <div class="weekDate" v-if="dateArr.length > 0 && dateArr">
            <div class="weekDateIn" v-for="(item, index) in dateArr" :key="index" @click="tapWeekInd(index)">
              <span class="spanTop" :class="[index == seleTap ? 'sToday' : '']">{{ checkTxt(item) }}</span>
              <div :class="[index == seleTap ? 'sTodayCircle' : '']" class="noneCircle">
                {{ item.work_date.slice(5, 7) }}月{{ item.work_date.slice(8, 10) }}日
              </div>
            </div>
          </div>
          <div class="timelist" v-if="dateArr[seleTap]">
            <template v-for="(item, index) in dateArr[seleTap].periods">
              <div v-if="item.status == 1" :key="index" class="dtime timeSelect" @click="tapTimeInd(index, item)"
                :class="{ 'onSelect': index == timeSelect && item.status == 1 }">
                {{ item.period_time_start_str }}
              </div>
            </template>
          </div>
          <div class="noSelect" v-if="!dateArr[seleTap]">暂无可预约时间</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    plugin: {
      type: Object,
      default: () => ({})
    },
    goods_info: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      show1: false,
      current_index: 0,
      reserveData: {
        name: "",
        time: "",
        price: "",
        optionsId: ""
      },
      fromStock: "",
      dateArr: [],
      workInfo: [],
      seleTap: 0,
      timeSelect: 0,
      childData: {
        time: "",
        item: null
      }
    };
  },
  mounted() {
    this.fromStock = this.$route.query.fromStock;
  },
  activated() {
    this.show1 = false;
  },
  computed: {
    appointmentLang() {
      if (this.$store.state.shopLanguage.reserve_simple) {
        return this.$store.state.shopLanguage.reserve_simple;
      } else {
        return { reserve_obj: "预约人员", service: "服务" };
      }
    }
  },
  methods: {
    opended_poup() {
      if (this.plugin && this.plugin.objs) {
        this.getData(this.plugin.objs[this.current_index].service_id, this.plugin.objs[this.current_index].id, 0, "one");
      }
    },
    close() {
      this.show1 = false;
      this.$emit('close')
    },
    submit() {
      if (this.fun.isTextEmpty(this.reserveData.time)) {
        Toast("请选择预约时间");
        return;
      }
      if (this.fun.isTextEmpty(this.reserveData.item) || this.fun.isTextEmpty(this.reserveData.item.service_id)) {
        Toast("请选择预约人员");
        return;
      }
      let json_data = {
        goodsId: this.goods_info.get_goods.id,
        optionsId:  this.plugin.objs[this.current_index].goods_option_id,
        total: "1",
        tag: "timeAppoint",
        reserveDataName: this.reserveData.item.name,
        reserveItem: this.reserveData.item,
        reserveDate: this.childData.time
      };
      if (this.fromStock) {
        json_data.fromStock = this.fromStock;
      }
      this.$router.push(this.fun.getUrl("goodsorder", {}, json_data));
      // this.show1 = false;
    },
    choose(i, item) {
      // this.$store.commit("setAppointment", item.id);
      this.$store.commit("setAppointment", i);
      this.current_index = i;
      this.getData(item.service_id, item.id, i, 'one');
    },
    checkTxt(str) {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1 < 10 ? `0${new Date().getMonth() + 1}` : `${new Date().getMonth() + 1}`;
      let date = new Date().getDate();
      let nowDate = `${year}-${month}-${date}`;
      if (nowDate == str.work_date) {
        return "今天";
      } else if (this.dateArr[1].work_date == str.work_date) {
        return "明天";
      }
      return str.work_date_week;
    },
    async tapTimeInd(e, item) {
      if (item.status == 0) {
        return Toast("当前时间不可预约");
      }
      this.timeSelect = e;
      this.childData.item = this.plugin.objs[this.current_index];
      let str = this.dateArr[this.seleTap].work_date;
      this.childData.time = `${str} ${this.dateArr[this.seleTap].periods[this.timeSelect].period_time_start_str}`;
      this.reserveData.time = this.childData.time;
    },
    async tapWeekInd(e) {
      this.seleTap = e;
      this.childData.item = this.plugin.objs[this.current_index];
      let ind = this.checkMr(this.dateArr[this.seleTap].periods);
      this.timeSelect = ind;
      if (this.dateArr[e].periods && this.dateArr[e].periods[this.timeSelect]) {
        // `${this.dateArr[this.seleTap].work_date} ${this.dateArr[this.seleTap].periods[this.timeSelect].period_time_start_str}`
        this.childData.time = `${this.dateArr[this.seleTap].work_date} ${this.dateArr[this.seleTap].periods[this.timeSelect].period_time_start_str}`;
      }
      this.reserveData = this.childData;
    },
    checkMr(oneSelect) {
      for (let i = 0; i < oneSelect.length; i++) {
        if (oneSelect[i].status == 1) {
          return i;
        }
      }
    },
    getWeek(dateString) {
      let dateArray = dateString.split("-");
      let date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
      return "周" + "日一二三四五六".charAt(date.getDay());
    },
    async getData(service_id, obj_id, index, key) {
      $http
        .get("plugin.reserve-simple.frontend.work-time.get-service-obj-periods", { obj_id, service_id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            let data = response.data;
            this.workInfo = response.data;
            if (data && data.length !== 0) {
              for (let i = 0; i < this.workInfo.length; i++) {
                this.workInfo[i].work_date_week = this.getWeek(this.workInfo[i].work_date);
              }
              if (key == "one") {
                let ind = this.checkMr(this.workInfo&&this.workInfo[this.seleTap].periods);
                if (!ind) this.childData.time = ""; //如果没有可以预约的就为空
                this.timeSelect = ind;
              }
              this.dateArr = this.workInfo;
              this.childData.item = this.plugin.objs[index];
              if (this.dateArr[this.seleTap].periods[this.timeSelect]) {
                if (this.dateArr[this.seleTap].periods[this.timeSelect].status == 0) {
                  this.childData.time = "";
                } else {
                  this.childData.time = `${this.dateArr[this.seleTap].work_date} ${this.dateArr[this.seleTap].periods[this.timeSelect].period_time_start_str}`;
                }
              }
              this.reserveData.time = this.childData.time;
            }else{
              this.dateArr = [];
            }

          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
  },
  watch: {
    show(newV) {
      this.show1 = newV;
    }
  }
};
</script>

<style scoped lang="scss">
.time-appointment {
  .noneCircle {
    font-size: .875rem;
    color: #AAAAB3;
  }

  .sTodayCircle {
    color: #F15353;
    text-align: center;
  }

  .sToday {
    color: #F15353 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .timeSelectCon {
    // width: 22.19rem;
    background-color: #fff;
    border-radius: 0.63rem;
    margin: 0 auto;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    box-sizing: border-box;

    .headTop {
      width: 22.19rem;
      position: relative;
      padding-left: .625rem;
      text-align: left;
      font-size: 1rem;
      margin: 0 .7813rem;
    }

    .headTop::after {
      position: absolute;
      content: "*";
      left: 0;
      top: 0;
      color: #f42a26;
    }

    .calendar {
      margin-top: 1.06rem;

      .timelist {
        // margin-top: 1.06rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        // .dtime:nth-child(n + 6) {
        //   margin-top: 1.09rem;
        // }

        .dtime:nth-child(5n) {
          border-right: unset !important;
        }

        .dtime:nth-child(1n) {
          border-left: unset !important;
        }

        .dtime {
          flex: 0 0 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1rem;
          font-weight: 400;
          padding: 1rem 0;
          box-sizing: border-box;
        }

        .onSelect {
          background: rgba(241, 83, 83, 0.39);
          border: none;
          color: #F15353;
        }

        .timeSelect {
          margin: -.5px;
          border: solid .5px #F0F0F1;
        }

        .timeSelect_none {
          border: solid 0.06rem #e8e8e8;
          color: #c4c4c4;
        }
      }

      .weekDate::-webkit-scrollbar {
        display: none;
      }

      .weekDate {
        width: 22.19rem;
        display: flex;
        align-items: center;
        padding-bottom: 0.63rem;
        box-sizing: border-box;
        // border-bottom: 0.03rem #f0f0f0 solid;
        overflow-x: auto;
        padding-left: .9375rem;

        .weekDateIn {
          // width: 20%;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-right: 1rem;

          .spanTop {
            margin-bottom: 0.3rem;
            font-size: 1rem;
            font-weight: 400;
            color: #3B3B4A;
          }
        }
      }
    }
  }

  .name {
    font-size: .875rem;
    color: #3B3B4A;
    line-height: 1;
    margin-bottom:.75rem;
  }

  .description {
    font-size: .75rem;
    color: #AAAAB3;
    padding: 0 0.5rem;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .Img {
    flex-shrink: 0;
    width: 2.81rem;
    height: 2.81rem;
    border-radius: 100%;
    margin: 0.75rem auto;

    img {
      margin: 0 auto;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .list {
    display: flex;
    overflow-x: scroll;
  }

  .list::-webkit-scrollbar {
    display: none;
  }

  .current {
    border: 1px solid #F15353 !important;
    background: rgba(241, 83, 83, 0.04) !important;
  }

  .list-item {
    margin-right: .5rem;
    width: 6.25rem;
    min-height: 7.875rem;
    background: #fff;
    border: 1px solid #AAAAB3;
    opacity: 1;
    border-radius: 0.5rem;
    flex-shrink: 0;
    padding-bottom: 0.3438rem;
  }

  .line {
    width: 100%;
    height: 0.75rem;
    background: #FAFAFA;
  }

  .technician {
    padding: 0 .8438rem .8438rem;

    .technician-title {
      position: relative;
      text-align: left;
      margin-bottom: .75rem;
      padding-left: .6rem;
      font-size: 1rem;
      color: #00001C;
      font-weight: 500;
    }

    .technician-title::after {
      position: absolute;
      content: "*";
      left: 0;
      top: 0;
      color: #F15353;
    }
  }

  .title {
    position: relative;
    margin: 1.5rem auto 1.25rem;
    text-align: center;
  }

  .confirm {
    position: absolute;
    color: #F15353;
    font-size: .9375rem;
    top: 50%;
    right: .9375rem;
    transform: translateY(-50%);
  }
}</style>
